<template>
  <div>
    <section class="banner">
      <client-carousel arrows="never" :url="banner" />
      <div class="mainCon">
        <client-title title="云服务器" class="content-title" />
        <div>为企业级用户提供优质的服务器选择的权利</div>
        <div class="learnMore">
          <span @click="handleBuy('buy')" class="not-selected" :class="{ selected: type === 'buy'}">立即购买</span>
          <span @click="handleBuy('count')" class="not-selected" :class="{ selected: type === 'count'}">价格计算器</span>
        </div>
      </div>
    </section>
    <section class="min-container">
      <configuration :type="type" :name="name"/>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { watch, ref, onMounted } from "vue";
import { getAssetURL } from "@/utils/load_assets";
import configuration from "@/views/client/cloudService/components/configuration.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const bannerUrl = getAssetURL("client/solution/image57.png");
const banner = ref<any>([{ url: bannerUrl }]);
const type = ref<any>("buy"); // 类型 buy购买 count计算
const name = ref<any>('');//服务器的规格

onMounted(() => {
  type.value = route.query.type;
  name.value = route.query.name;
});

watch(route, (val) => {
  type.value = val.query.type || "buy";
});

// 立即购买
const handleBuy = (type) => {
  router.push({
    path: "/client/cloudService/components/shoppingHome",
    query: { type },
  });
};
</script>
<style lang="less" scoped>
.banner {
  position: relative;
  width: 100%;
  .mainCon {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 1200px;
    transform: translateX(-50%);
    .content-title {
      text-align: left;
      margin: 40px 0;
      color: #313131;
    }
    .learnMore {
      margin-top: 60px;
      .not-selected {
        background-color: #ffffff;
        margin-right: 20px;
        color: #313131;
      }

      .selected {
        background-color: #4098ff;
        margin-right: 20px;
        color: #ffffff;
      }
      span {
        padding: 10px 60px;
        transition: all 0.3s;
        &:hover {
          cursor: pointer;
          background-color: #66cafe;
          color: #ffffff;
        }
        &:active {
          background-color: #57b3e4;
        }
      }
    }
  }
}
</style>
